<template>
  <basic-dialog :visible="isVisible"
                :title="`选择${toolData.type}型号`"
                isShowBasicFooter
                :min-width="'700px'"
                @close="isVisible = false"
                @submit="submit()"
  >
      <div class="padding-20">
          <select-input ref="selectInput"
                        :list="searchCondition"
                        @search="inputSearch"
                        :isLongth="false"
                        style="width: 220px;"
                        class="margin-b-20"
                        @changeVal="changeVal"
                        @clearSearchVal="clearSearchVal" />
          <div class="page-content" style="margin-bottom: -10px;">
          <q-table :data="tableData"
                   :columns="tableColumns"
                   row-key="id"
                   style="margin: 0px;max-height: 400px"
                   class="scroll myTable inherit"
                   :loading="isTableLoading"
                   selection="single"
                   :selected.sync="selected"
                   :pagination.sync="pagination"
                   :hide-bottom="tableData.length > 0"
                   no-data-label="暂无数据"
                   color="primary">
          </q-table>
        </div>
      </div>
  </basic-dialog>
</template>
<script>
import SelectInput from 'src/components/select-input/index'
import { getDictModelList } from 'src/boot/tool/tool-code'
import _ from 'lodash'
export default {
  name: 'select-tool-dialog',
  components: {
    SelectInput
  },
  props: {
    toolData: Object
  },
  data () {
    return {
      searchCondition: [
        { id: 'model', name: `${this.toolData.type}编号` },
        { id: 'name', name: `${this.toolData.type}名称` }
      ],
      searchParams: {},
      tableData: [],
      selected: [],
      isVisible: false,
      pagination: {
        rowsPerPage: 0
      },
      isTableLoading: false
    }
  },
  computed: {
    tableColumns () {
      const msg = this.toolData.type
      return [
        {
          name: 'model',
          label: `${msg}型号`,
          align: 'left',
          field: 'model'
        },
        {
          name: 'name',
          label: `${msg}名称`,
          align: 'left',
          field: 'name'
        },
        {
          name: 'typeCodeDesc',
          label: `${msg}类型`,
          align: 'left',
          field: 'typeCodeDesc'
        },
        {
          name: 'spec',
          label: `${msg}规格`,
          align: 'left',
          field: 'spec'
        },
        {
          name: 'unitCodeDesc',
          label: `${msg}单位`,
          align: 'left',
          field: 'unitCodeDesc'
        }
      ]
    }
  },
  methods: {
    // 初始化弹窗
    initDialog () {
      this.isVisible = true
      this.selected = []
      this.tableData = []
      this.clearSearchVal()
    },
    // 模糊查询
    inputSearch (item, val) {
      this.searchParams.searchBy = item.id
      this.searchParams.keyword = val
      this.selected = []
      this.getList()
    },
    // 清空搜索值
    clearSearchVal () {
      this.searchParams.searchBy = null
      this.searchParams.keyword = null
      this.searchParams = {}
      this.getList()
    },
    // 手动清空input框请求数据.
    changeVal (val) {
      _.isEmpty(val) && this.clearSearchVal()
    },
    getList () {
      this.isTableLoading = true
      getDictModelList(this.searchParams).then(res => {
        const ret = res.data
        this.tableData = ret
        this.isTableLoading = false
      }).catch(e => e)
    },
    submit () {
      if (_.isEmpty(this.selected)) {
        this.$message.warning('请选择型号')
        return
      }
      this.isVisible = false
      this.$emit('add', this.selected)
    }
  }
}
</script>
